import { useEffect, useState } from "react";
import { Button, Table, Modal, Tree } from "antd";
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import axios from "axios";
/** @import {Role, Right, ReactState} from '../../../types' */

function RoleList() {
    /** @type {ReactState<Role[]>} */
    const [roles, setRoles] = useState([]);
    /** @type {ReactState<Right[]>} */
    const [rights, setRights] = useState([]);

    const [modalOpened, setModalOpended] = useState(false);
    /** @type {ReactState<string[]>} */
    const [currentRights, setCurrentRights] = useState([]);
    const [currentId, setCurrentId] = useState(0);
    const columns = [
        {
            title: "ID",
            dataIndex: "id"
        },
        {
            title: "角色名称",
            dataIndex: "roleName"
        },
        {
            title: "操作",
            /** @type {(item: Role)} */
            render: (role) => (
                <div>
                    <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => handleDelete(role)}></Button>
                    <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => {
                        setCurrentRights(role.rights);
                        setCurrentId(role.id);
                        setModalOpended(true);
                    }} />
                </div>
            )
        }
    ];
    // 拉取角色数据与权限数据
    const fetchData = async () => {
        let res = await axios.get("/roles");
        setRoles(res.data);
        let res2 = await axios.get("/rights?_embed=children");
        setRights(res2.data);
    };
    useEffect(() => { fetchData(); }, []);

    /** 删除权限 @type {(item: Role) => void} */
    const handleDelete = (role) => {
        Modal.confirm({
            title: "是否删除？",
            onOk: async () => {
                console.log("DeleteRole", role);
                await axios.delete("/roles/" + role.id);
                await fetchData();
            }
        });
    };

    const handleModalOk = () => {
        setCurrentRights(roles.map((role) => {
            if (role.id === currentId)
                role.rights = currentRights;
        }));
        console.log(currentRights.checked);
        axios.patch("/roles/" + currentId, {
            rights: currentRights.checked
        });
        setModalOpended(false);
    };
    const handleModalCancel = setModalOpended.bind(undefined, false);

    return (
        <div>
            <Table dataSource={roles} columns={columns} rowKey={(item) => item.id }/>
            <Modal
                title="权限分配"
                open={modalOpened}
                onOk={handleModalOk}
                onCancel={handleModalCancel}
            >
                <Tree
                    checkable
                    checkStrictly
                    checkedKeys={currentRights}
                    onCheck={(checkedKeys) => setCurrentRights(checkedKeys)}
                    treeData={rights}
                />
            </Modal>
        </div>
    );
}

export default RoleList;